<template>
  <div>
    <!-- watch:侦听某个值的变化后执行相应事件（某个值的change事件）
            用法：
               data(){
                return {
                  xxx:123
                  obj:{
                    name:'张三',
                    age:18
                  }
                }
               },
               watch:{
                "obj.age":{
                  handler(newVal,oldVal){
                     newVal:修改后的值（当前值）
                     oldVal:修改前一刻的值
                  }，
                  deep:深度侦听
                    默认是侦听栈的变化，deep:true,堆与栈都侦听
                  immediate:是否立即执行handler方法
                }
               }
  -->
    <h3>{{ obj }}</h3>
    <button @click="btnClick">修改age</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: '张三',
        age: 20
      }
    }
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        if (newVal.age >= 20) {
          alert('您已超过20')
        }
        console.log(newVal, oldVal)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    btnClick() {
      this.obj.age++
      // this.obj = {
      //   name: '张三',
      //   age: this.obj.age + 1
      // }
    }
  }
}
</script>
<style></style>
>
